<template>
	<div class="heightMax alarmBox" v-loading='loading'>
		<div class="flex">
			<div class="publicbox">
				<div class="listName">
					<i></i><span class="font14">电梯基本信息</span>
				</div>
				<el-form :model="form" size="mini" ref='form'>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="设备代码:">
								<div class="textLeft">{{form.resCode}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="档案编号:">
								<div class="textLeft">{{form.fileNum}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="设备类型:">
								<div class="textLeft">{{form.deviceType}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="设备名称:">
								<div class="textLeft">{{form.deviceName}}</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="注册日期:">
								<div class="textLeft">{{form.signDate}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="制造单位:">
								<div class="textLeft">{{form.manufactureCom}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="到检日期:">
								<div class="textLeft">{{form.examineDate}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="使用地点:">
								<div class="textLeft">{{form.userCom}}</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="publicbox" style="margin-top: 5px;flex: 1;">
				<div class="listName">
					<i></i>
					<div class="font14">报告内容</div>
				</div>
				<el-row :gutter="10">
					<el-col :span="6">
						<span class="font14">报警状态：</span>
						<el-select size="mini" v-model="policeStatus" placeholder="请选择报警状态" clearable>
							<el-option v-for="(item) in policeStatusArr" :key="item.code" :label="item.value" :value="item.code">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<span class="font14">开始时间：</span>
						<el-date-picker size="mini" v-model="time_from" type="date" placeholder="选择开始日期" format='yyyy-MM-dd' value-format='yyyy-MM-dd'
						 @change='changeTime'>
						</el-date-picker>
					</el-col>
					<el-col :span="6">
						<span class="font14">结束时间：</span>
						<el-date-picker size="mini" v-model="time_to" type="date" placeholder="选择结束日期" format='yyyy-MM-dd' value-format='yyyy-MM-dd'
						 :picker-options="pickerOptions" :disabled="timeDisabled">
						</el-date-picker>
					</el-col>
					<el-col :span="1.5">
						<el-button type="primary" icon="el-icon-search" @click='find' size="mini">搜索</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button icon="el-icon-delete" @click='reset' size="mini">重置</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button icon="el-icon-bell" @click='inform' size="mini" type="primary">人工通知</el-button>
					</el-col>
				</el-row>
				<div class="tableBox" style="margin-top: 10px;">
					<vueScroll>
						<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
						 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
							<el-table-column type="index" class="over" fixed>
							</el-table-column>
							<el-table-column type="selection" min-width="50" fixed>
							</el-table-column>
							<el-table-column label="通知时间">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.create_time" placement="top">
										<span class="speSpan">{{scope.row.create_time}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="报警地点">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.alarm_position" placement="top">
										<span class="speSpan">{{scope.row.alarm_position}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="报警类型">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.alarm_typeName" placement="top">
										<span class="speSpan">{{scope.row.alarm_typeName}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="通知人员">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.notify_person" placement="top">
										<span class="speSpan">{{scope.row.notify_person}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="回执状态">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.receipt_status" placement="top">
										<span class="speSpan">{{scope.row.receipt_status}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="通知方式">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.notify_method" placement="top">
										<span class="speSpan">{{scope.row.notify_method}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页器 -->
						<div class="pag">
							<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
							 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
							</el-pagination>
						</div>
					</vueScroll>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		moment
	} from "@/common.js";
	export default {
		mounted() {
			this.getList()
			this.getAllSign()
			this.getAllMess()
		},
		data() {
			return {
				loading: false,
				form: {
					resCode: '',
					fileNum: '',
					deviceType: '',
					deviceName: '',
					signDate: '',
					manufactureCom: '',
					examineDate: '',
					userCom: ''
				},
				policeStatusArr: [],
				policeStatus: '',
				time_from: '',
				time_to: '',
				tableData: [],
				total: 0,
				page: 1,
				page_size: 10
			}
		},
		computed: {
			liftId() {
				if (localStorage.liftDetailId) {
					return JSON.parse(localStorage.liftDetailId).id
				} else {
					return ''
				}
			},
			timeDisabled() {
				if (this.time_from) {
					return false
				} else {
					return true
				}
			},
			pickerOptions() {
				return {
					disabledDate: (time) => {
						return time.getTime() < moment(this.time_from)
					}
				}
			},
		},
		methods: {
			getList() {
				if(this.liftId){
					let params = {
						id: this.liftId
					}
					axiosGet('/manu/elevator/basic/statistics', params, (res) => {
						if (res.code == 0) {
							this.form.resCode = res.detail.register_code
							this.form.fileNum = res.detail.elevator_type
							this.form.deviceType = res.detail.elevator_name
							this.form.deviceName = res.detail.factory_no
							this.form.signDate = res.detail.registry_time
							this.form.manufactureCom = res.detail.manufacturer_company_name
							this.form.examineDate = res.detail.next_yearly_inspection_date
							this.form.userCom = res.detail.installation_place
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}
			},
			getAllMess() {
				if (this.liftId) {
					this.loading = true
					let url = '/manu/elevator/alarmsV2/'
					let params = {
						id: this.liftId,
						page: this.page,
						page_size_count: this.page_size,
						alarm: this.policeStatus,
						time_from: this.time_from,
						time_to: this.time_to
					}
					axiosGet(url, params, (res) => {
						this.loading = false
						if (res.code == 0) {
							this.total = res.detail.count
							this.tableData = res.detail.results.map((item) => {
								if (item.alarm_type.length != 0) {
									if (item.alarm_type[0].value) {
										item.alarm_typeName = item.alarm_type[0].value
									} else {
										item.alarm_typeName = '暂无'
									}
								}
								return item
							})
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}
			},
			handleSizeChange(size) {
				this.page_size = size
			},
			handleCurrentChange(page) {
				this.page = page
			},
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			selectChange(res) {

			},
			inform() {

			},
			find() {
				this.page = 1
				this.page_size = 10
				this.getList()
			},
			reset() {
				this.policeStatus = ''
				this.time_from = ''
				this.time_to = ''
				this.find()
			},
			changeTime() {
				this.time_to = ''
			},
			getAllSign() {
				axiosGet('/basic/sys/', {}, (res) => {
					if (res.code == 0) {
						this.policeStatusArr = res.detail
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 5px;

		i {
			width: 3px;
			height: 15px;
			background: #2d8cf0;
			margin: 5px 5px;
		}
	}

	.el-form {
		padding-left: 20px;
		box-sizing: border-box;
	}

	.flex {
		display: flex;
		height: 100%;
		flex-direction: column;
	}

	.el-row {
		margin: 0 !important;
	}
</style>
